<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="common/head.jsp" %>
<div class="right_col" role="main">
    <div style="height: 300px;width: 800px;margin-top: 100px;margin-left:20px;">
        <p>商品总销量比例统计</p>
        <div id="mainChart" style="border: 1px solid #438FB9; width:100%; height:100%;"></div>
        <%--<p>商品近七日销售情况</p>--%>
        <%--<div id="dailyChart" style="border: 1px solid #438FB9; width:100%; height:30%;"></div>--%>
        <%--<p>商品近半年销售情况</p>--%>
        <%--<div id="monthlyChart" style="border: 1px solid #438FB9; width:100%; height:30%;"></div>--%>
    </div>
    <div class="clearfix"></div>
</div>
<%@include file="common/footer.jsp" %>
<script src="${pageContext.request.contextPath }/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/echarts.min.js"></script>
<script type="text/javascript">
    //使用ajax加载数据 
    $.ajax({
        method: 'POST',
        url: '${pageContext.request.contextPath}/admin/flatform/sales/echartsData',
        success: function (data) {
            initChat(data);
        }
    });

    function initChat(data) {
        var parse = JSON.parse(data);
        console.log(parse);
        var myChart = echarts.init(document.getElementById('mainChart'));
        myChart.setOption(
            {
                title: {
                    text: '',
                    subtext: '内部数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '销量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: parse,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        )
    };
</script>
<%--<script type="text/javascript">--%>
<%--    //使用ajax加载数据--%>
<%--    $.ajax({--%>
<%--        method: 'POST',--%>
<%--        url: '${pageContext.request.contextPath}/admin/flatform/sales/dailyEChartsData',--%>
<%--        success: function (data) {--%>
<%--            initChat(data);--%>
<%--        }--%>
<%--    });--%>

<%--    function initChat(data) {--%>
<%--        var res = JSON.parse(data);--%>
<%--        console.log(res);--%>
<%--        var myChart = echarts.init(document.getElementById('dailyChart'));--%>
<%--        myChart.setOption(--%>
<%--            {--%>
<%--                title: {--%>
<%--                    text: '',--%>
<%--                    subtext: '',--%>
<%--                    x: 'center'--%>
<%--                },--%>
<%--                tooltip: {--%>
<%--                    trigger: 'axis'--%>
<%--                },--%>
<%--                legend: {--%>
<%--                    data: res.comName--%>
<%--                },--%>
<%--                toolbox: {--%>
<%--                    show: true,--%>
<%--                    feature: {--%>
<%--                        dataZoom: {--%>
<%--                            yAxisIndex: 'none'--%>
<%--                        },--%>
<%--                        magicType: { type: ['line', 'bar'] },--%>
<%--                        restore: {},--%>
<%--                        saveAsImage: {}--%>
<%--                    }--%>
<%--                },--%>
<%--                xAxis: {--%>
<%--                    type: 'category',--%>
<%--                    boundaryGap: false,--%>
<%--                    data: res.timeKey--%>
<%--                },--%>
<%--                yAxis: {--%>
<%--                    type: 'value'--%>
<%--                },--%>
<%--                series: res.commodity--%>
<%--            }--%>
<%--        )--%>
<%--    };--%>
<%--</script>--%>
<%--<script type="text/javascript">--%>
<%--    //使用ajax加载数据--%>
<%--    $.ajax({--%>
<%--        method: 'POST',--%>
<%--        url: '${pageContext.request.contextPath}/admin/flatform/sales/monthlyEChartsData',--%>
<%--        success: function (data) {--%>
<%--            initChat(data);--%>
<%--        }--%>
<%--    });--%>

<%--    function initChat(data) {--%>
<%--        var res = JSON.parse(data);--%>
<%--        console.log(res);--%>
<%--        var myChart = echarts.init(document.getElementById('monthlyChart'));--%>
<%--        myChart.setOption(--%>
<%--            {--%>
<%--                title: {--%>
<%--                    text: '',--%>
<%--                    subtext: '',--%>
<%--                    x: 'center'--%>
<%--                },--%>
<%--                tooltip: {--%>
<%--                    trigger: 'axis'--%>
<%--                },--%>
<%--                legend: {--%>
<%--                    data: res.comName--%>
<%--                },--%>
<%--                toolbox: {--%>
<%--                    show: true,--%>
<%--                    feature: {--%>
<%--                        dataZoom: {--%>
<%--                            yAxisIndex: 'none'--%>
<%--                        },--%>
<%--                        magicType: { type: ['line', 'bar'] },--%>
<%--                        restore: {},--%>
<%--                        saveAsImage: {}--%>
<%--                    }--%>
<%--                },--%>
<%--                xAxis: {--%>
<%--                    type: 'category',--%>
<%--                    boundaryGap: false,--%>
<%--                    data: res.timeKey--%>
<%--                },--%>
<%--                yAxis: {--%>
<%--                    type: 'value'--%>
<%--                },--%>
<%--                series: res.commodity--%>
<%--            }--%>
<%--        )--%>
<%--    };--%>
<%--</script>--%>